<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>用户注册</title>
    <style type="text/css">
      .regist{
      width:600px;
      height:300px;
      margin:20px auto;
      padding:10px ;
      }
      .main{
      padding:15px}
    </style>
	<link rel="stylesheet" href="css/bootstrap.css"></link>
	<link rel="stylesheet" href="css/style.css"></link>
	<link rel="stylesheet" href="css/myButton.css"></link>
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/jquery.easydropdown.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
  </head>
  
 
 <body>
  <%@include file="common/head.jsp" %>
    <div class="menu"></div>
<div class="regist" style="height: 600px">
   <div class="panel panel-primary main">
  <div class="panel-heading"><h2>注册</h2></div>
    <form role="form" action="regist.action" method="post" id="registForm">
  <div class="form-group">
    <label for="username">用户名:</label>
    <input type="text" class="form-control" name="user.username" id="username" placeholder="请输入用户名" autocomplete="off" onblur="usernameCheck()">
    <img alt="图片加载错误" height="16px" src="" id="iUsernameCheck" style="display: none;">
    <span id="usernameCheck"></span>
    <span class="redstar">*</span>
  </div>
  <div class="form-group">
    <label for="username">昵称:</label>
    <input type="text" class="form-control" name="user.name" id="name" placeholder="请输入昵称" autocomplete="off">
    <span class="redstar">*</span>
  </div>
  <div class="form-group">
    <label for="password1">密      码：</label>
    <input type="password" class="form-control" name="user.password" id="password1" placeholder="请输入密码" autocomplete="off">
    <span class="redstar">*</span>
  </div>
  <div class="form-group">
    <label for="password2">确认密码：</label>
    <input type="password" class="form-control" name="checkpassword" id="password2" placeholder="请再次输入密码" autocomplete="off"/></p>
    <span class="redstar">*</span>
  </div>
   <div class="form-group" style="text-align:center;">
    <label for=""></label>
    <input type="button" class="button blue" value="返回" onclick="history.go(-1)"/>
	<span style="width: 85px;display: inline-block;"></span>    
    <input type="button" class="button rosy" value="注册" onclick="check()"/>
  </div>
  </form>
 </div>

</div>
	<script type="text/javascript">
		function usernameCheck() {
			var username = $("#username").val();
			if (username == "") {
				return true;
			}
			$.ajax({
				url : "usernameCheck.action",
				type : "post",
				data : {"user.username" : username},
				dataType : "json",
				success : function(data) {
					var flag = JSON.parse(data).flag;
					if (flag == "success") {
						$("#usernameCheck").html('当前用户名可用');
						$("#usernameCheck").attr("style", "color:green;");
						$("#iUsernameCheck").attr({
							src : "./images/mySuccess.jpg",
							style : "display:inline;"
						});
						return true;
					} else if (flag == "error") {
						$("#usernameCheck").html('当前用户名已经被占用');
						$("#usernameCheck").attr("style", "color:red;");
						$("#iUsernameCheck").attr({
							src : "./images/myError.jpg",
							style : "display:inline;"
						});
						return false;
					}
				}
			})
		}

		function check() {
			var name = $("#name").val();
			var username = $("#username").val();
			var pwd1 = $("#password1").val();
			var pwd2 = $("#password2").val();
			if ($("#usernameCheck").html() == '当前用户名已经被占用') {
				alert("您输入的用户名已经被占用");
				$("#username").focus();
				return false;
			}
			if (name == "" || name.length > 16) {
				alert("请输入不为0且不超过16位的显示名");
				return false;
			}
			if (username == "" || username.length > 32) {
				alert("请输入不为0且不超过32位的用户名");
				return false;
			}
			if (pwd1 == "" || pwd1.length > 16) {
				alert("请输入不为0且不超过16位的密码");
				return false;
			} else if (pwd1 != pwd2) {
				alert("两次输入的密码不一致！");
				return false;
			}
			$("#registForm").submit();
		}
	</script>

	<%@include file="../common/footer.jsp"%>
	
</body>
</html>
